<template>
	<div class="due CommonHeight">
		<view class="status_bar"></view>
		<!-- 因为背景色不同，所以传入一个标题用来进行判断 -->
		<navBar text="待付款">
			<template v-slot:head>
				<image class="headPic" src="@/static/order-icons/wait_pay.png" mode=""></image>
				<text>待付款</text>
			</template>
			<template v-slot:subhead>
				剩余
				<text style="color: #ffffff; margin: 0 5px">{{ message }}</text>
				自动关闭订单
			</template>
		</navBar>
		<div class="secureCaseBox">
			<!-- 修改地址 -->
			<addressEdit phoneName="李二狗" Telephone="17276726953" Address="北京市朝阳区劲松街道华腾园6-1508北京市朝阳区劲松街道华腾园"></addressEdit>
			<!-- 货物价值 -->
			<shopPro>
				<template v-slot:shopName>{{ product.productName }}</template>
				<!-- <template v-slot:residue><van-tag plain type="danger" class='residue'>剩余123台</van-tag></template> -->
				<template v-slot:countNum>
					<span>*{{ product.count }}</span>
					<span>${{ product.productPrice }}</span>
				</template>
				<template v-slot:freight>
					<span>运费</span>
					<span>{{ product.freightPrice }}USDT</span>
				</template>
				<template v-slot:line>
					<div class="van-hairline--top"></div>
				</template>
				<template v-slot:needToPay>
					<span>需付款</span>
					<!-- 不确定是1100 -->
					<span class="sum colorRed">{{ product.productPrice * product.count + product.freightPrice }}USDT</span>
				</template>
			</shopPro>
			<!-- 订单编号，创建时间 -->
			<orderInfo style="width: 91%">
				<template v-slot:order>
					<div class="order">
						<span>订单编号</span>
						<div class="colorGray colorFFF" @click="copy(orderNum)">
							<span>{{ orderNum }}</span>
							<image src="../../static/images/Order/tracking_copy.png" mode="widthFix"></image>
						</div>
					</div>
				</template>
				<template v-slot:time>
					<div class="time">
						<span>创建时间</span>
						<span class="colorGray colorFFF">{{ creationTime }}</span>
					</div>
				</template>
			</orderInfo>
			<!-- 联系我们 -->
			<!-- <ContactUs></ContactUs> -->
		</div>
		<!-- 操作 -->
		<Operate>
			<template v-slot:buy>
				<div class="operate">
					<div class="cancel" @click="Cancel">取消订单</div>
					<div class="buy">
						<van-button plain class="editAddress btnBorder">修改地址</van-button>
						<van-button type="primary" class="commonBtn" @click="showPopup">立即购买</van-button>
					</div>
				</div>
			</template>
		</Operate>
		<van-popup v-model:show="showBottom" position="bottom" :style="{ height: '80%', background: '#222324' }">
			<!-- <securityKey duePag="duePag" @FlagA="FlagA"></securityKey> -->
			<KeyBoard :ShowPayment="showBottom" duePag="duePag" @FlagA="FlagA">
				<template v-slot:verifyBtn>
					<view @click="complete">确认</view>
				</template>
			</KeyBoard>
		</van-popup>
	</div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import { startCountdown, message, intervalId } from '../../utils/countDown.ts';
import { copy } from '../../utils/copy.ts';
import { useStore } from 'vuex';
import type { Product } from '@/types/product.js';
import KeyBoard from '../../components/product/KeyBoard/index.vue';
// const emit = defineEmits(["closePaySuccess", "clickShowPaySuecc"]);
const store = useStore();

const showBottom = ref(false);
const countDown = ref(null);
// 商城的数据
let product: Product = store.state.product;
// copy功能
const orderNum = ref('168516518165168165');

// 关闭键盘弹出层
const FlagA = (val: any): void => {
	console.log(val);
	showBottom.value = val;
};

// 完成
const complete = (): void => {
	console.log(store.state.KeyValue);
	let KeyValue = store.state.KeyValue;
	if (KeyValue === '') return;
	// 将KeyValue密码存到本地存储或者vuex(后期改)
	// emit("clickShowPaySuecc", true);

	// 获取支付时间
	let date = new Date();
	let year = date.getFullYear();
	let month = date.getMonth() + 1;
	let day = date.getDate();
	let hours = date.getHours();
	let minutes = date.getMinutes();
	let seconds = date.getSeconds();
	let fullDateStr = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
	console.log(fullDateStr);
	store.commit('savePaymentTimeFn', fullDateStr);

	if (store.state.title === '寄回') {
		uni.navigateTo({
			url: '/subdue/wait/index'
		});
	} else if (store.state.title === '设备兑换券') {
		uni.navigateTo({
			url: '/subdue/closeTheDeal/index'
		});
	} else if (store.state.title === '托管') {
		uni.navigateTo({
			url: '/subdue/closeTheDeal/index'
		});
	}

	// uni.redirectTo({
	// 	url: "/subdue/closeTheDeal/index?status=true",
	// });
	// 可以改成正规的调用vuex里面的mutation方法
	store.state.KeyValue = '';
};

// 取消订单
const Cancel = (): void => {
	uni.redirectTo({
		url: '/subdue/closeDeal/index'
	});
};
// 支付弹框
const showPopup = (): void => {
	showBottom.value = true;
	// countDown.value!.pause();
};

// 启动倒计时
onMounted(() => {
	startCountdown();
});
// 摧毁定时器
onBeforeUnmount(() => {
	console.log(intervalId);
	clearInterval(intervalId.value);
});

// 创建订单的时间
const creationTime = computed(() => {
	let date = new Date();
	let year = date.getFullYear();
	let month = date.getMonth() + 1;
	let day = date.getDate();
	let hours = date.getHours();
	let minutes = date.getMinutes();
	let seconds = date.getSeconds();
	let fullDateStr = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
	// console.log(fullDateStr);
	store.commit('saveTimeFn', fullDateStr);
	return fullDateStr;
});
</script>

<style lang="scss" scoped>
.due {
	position: relative;

	.headPic {
		width: 41px;
		height: 44px;
		margin-right: 21px;
	}
}

// ::v-deep.order,
// ::v-deep.time {
// 	display: flex;
// 	justify-content: space-between;
// 	align-items: center;
// 	font-size: 24px;
// 	font-family: PingFangSC-Regular, PingFang SC;
// 	font-weight: 400;
// 	color: #FFFFFF;
// 	line-height: 80px;

// 	.colorGray {
// 		display: flex;
// 		align-items: center;
// 		max-width: 482px;
// 		/* color: #; */
// 		text-align: right;

// 		image {
// 			width: 30px;
// 			margin: 0 4px;
// 		}
// 	}
// }

// .secureCaseBox {
// 	position: absolute;
// 	top: 20%;
// 	left: 0;
// 	width: 100%;
// 	border-radius: 30px;
// 	background-color: rgba(18, 19, 22, 1);

// 	.secureCaseContent {
// 		padding: 40px 0 40px 0;
// 	}
// }

.colorRed {
	color: rgba(248, 68, 77, 1);
	font-size: 32px;
}
</style>
